<template>
  <!-- 公司设置组件 -->
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row>
          <el-tabs v-model="activeName">
            <!-- 

      角色管理部分
     -->
            <el-tab-pane label="角色管理" name="cosplay">
              <!-- 按钮部分 -->
              <el-row class="aniu">
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-plus"
                  @click="roleadd"
                  >新增角色</el-button
                >
              </el-row>
              <!-- 表格 -->
              <el-table :data="list" :border="true" style="width: 100%">
                <el-table-column type="index" label="序号" width="120">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="240">
                </el-table-column>
                <el-table-column prop="description" label="描述">
                </el-table-column>
                <el-table-column label="操作">
                  <!-- 操作按钮 -->
                  <!-- 
                    通过el组件里面得<template slot-scope="{ row }">方法获取文件id

                   -->
                  <template slot-scope="{ row }">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="FenPprimary(row.id)"
                      >分配权限</el-button
                    >
                    <el-button
                      type="success"
                      size="mini"
                      @click="updateRole(row.id)"
                      >修改</el-button
                    >
                    <el-button
                      type="danger"
                      size="mini"
                      @click="deleteRole(row.id)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <el-row
                type="flex"
                align="middle"
                justify="center"
                style="height: 60px"
              >
                <el-pagination
                  layout="prev, pager, next"
                  :total="100"
                  @current-change="currentPage"
                >
                </el-pagination>
              </el-row>
            </el-tab-pane>
            <!-- 
公司的配置部分

     -->
            <el-tab-pane label="公司信息" name="firm">
              <el-alert title="警告提示的文案" type="warning" :closable="false">
              </el-alert>
              <el-form label-width="120px" style="margin-top: 50px">
                <el-form-item label="企业名称">
                  <el-input
                    v-model="formData.name"
                    disabled
                    style="width: 400px"
                  ></el-input>
                </el-form-item>
                <!--  -->
                <el-form-item label="公司地址">
                  <el-input
                    v-model="formData.companyAddress"
                    disabled
                    style="width: 400px"
                  ></el-input>
                </el-form-item>
                <!--  -->
                <el-form-item label="公司电话">
                  <el-input
                    v-model="formData.companyPhone"
                    disabled
                    style="width: 400px"
                  ></el-input>
                </el-form-item>
                <!--  -->
                <el-form-item label="邮箱">
                  <el-input
                    v-model="formData.mailbox"
                    disabled
                    style="width: 400px"
                  ></el-input>
                </el-form-item>
                <!--  -->
                <el-form-item label="备注">
                  <el-input
                    v-model="formData.remarks"
                    disabled
                    style="width: 400px"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-row>
        <!-- 新增角色创建弹窗 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="40%">
          <span>
            <el-form
              ref="form"
              :model="roleForm"
              label-width="120px"
              :rules="rules"
            >
              <el-form-item label="角色" prop="name">
                <el-input v-model="roleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="角色描述">
                <el-input v-model="roleForm.description"></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogON">取 消</el-button>
            <el-button type="primary" @click="dialogOK">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
    <!-- 
分配权限的弹窗

     -->
    <el-dialog :visible="porShow" title="分配权限" @close="primaryNo">
      <!-- 树形结构 -->
      <el-tree
      ref="primaryTree"
        :data="RooTdata"
        :default-expand-all="true"
        :props="defaultProps"
        :show-checkbox="true"
        :check-strictly="true"
        :default-checked-keys="RootLinK"
        node-key="id"
      ></el-tree>
      <!-- 按钮 -->
      <el-row type="flex" justify="end">
        <el-button size="small" @click="primaryNo">取消</el-button>
        <el-button type="primary" size="small" @click="primaryOk">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// 引入获取角色信息列表
import {
  getRoleList,
  getCompanyInfo,
  deleteRole,
  getRoleDetail,
  updateRole,
  addRole,
} from "@/api/setting";
// 引入树状图的api接口
import { getPermission } from "@/api/permission";
// 引入快捷访问的方法
import { mapGetters } from "vuex";
// 引入转换树状图的递归函数
import { tranListToTreeData } from "@/utils/index";
// 引入角色分配权限
import {assignPremRole} from "@/api/setting"
export default {
  data() {
    return {
      activeName: "cosplay",
      // 接收cosplay文件
      list: [],
      page: {
        // 放置页码及相关数据
        page: 1, //当前页
        pagesize: 10, //每页条目数
        total: 0, // 记录总数
      },
      // 获取公司id得数据
      formData: {},
      dialogVisible: false,
      // 编辑的角色信息
      roleForm: {
        name: "",
        description: "",
      },
      rules: {
        name: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
      },
      // 展示树形结构数据
      RooTdata: [],
      // 弹窗的显示与隐藏
      porShow: false,
      // 展示树状图的内容
      defaultProps: {
        label: "name",
      },
      // 存储点击分配权限的id
      RooTid: "",
      // 存放已经存在的权限选项
      RootLinK: [],
    };
  },
  // 计算属性
  computed: {
    ...mapGetters(["companyId"]),
  },
  // 初始化属性
  created() {
    // 创建初始化方法的到数据
    this.getRoleList();
    this.getCompanyInfo(); //获取公司信息
  },
  methods: {
    // 请求数据
    async getRoleList() {
      // 解析数据
      const { rows, total } = await getRoleList(this.page);
      // 将解析的数据后分割给相应的文件
      this.list = rows;
      this.page.total = total;
    },
    // 点击分页触发事件
    currentPage(newPage) {
      this.page.page = newPage;
      this.getRoleList();
    },
    // 获取公司id
    async getCompanyInfo() {
      // 传入公司id获取方法
      const res = await getCompanyInfo(this.companyId);
      this.formData = res;
    },
    /* 
    删除角色的请求接口id是上方传下来的数据id
    */
    deleteRole(id) {
      // 发起请求方法
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 点击确认调用删除接口
          await deleteRole(id);
          //  重新获取数据刷新视图
          this.getRoleList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /* 
   编辑角色的文件
   */
    async updateRole(id) {
      // 判断是编辑页面还是新增页面怎么去判断判断打开的窗口文件是否存在id

      // 请求数据信息
      const res = await getRoleDetail(id);
      //  将数据信息赋值给定义的对象
      this.roleForm = res;
      //  打开弹窗
      this.dialogVisible = true;
    },
    // 点击弹窗的确认按钮
    async dialogOK() {
      // 点击确然按钮只有通过了效验才会向文件中添加文件
      await this.$refs.form.validate();
      try {
        if (this.roleForm.id) {
          // 有id就是编辑
          // 效验通过之后发编辑请求请求
          await updateRole(this.roleForm);
          this.$message({
            showClose: true,
            message: "编辑成功",
            type: "success",
          });
        } else {
          // 没id就是新增
          // 发起新增请求
          await addRole(this.roleForm);
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success",
          });
        }
      } catch (eer) {
        this.$message({
          showClose: true,
          message: "编辑错误",
          type: "error",
        });
      }

      // 更新视图重新拉取数据
      this.getRoleList();
      this.dialogON();
    },
    // 点击弹窗的取消按钮
    dialogON() {
      // 清空文本的内容
      this.roleForm = {
        name: "",
        description: "",
      };
      // 关闭表单的错误效验
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
    // 新增角色弹窗
    roleadd() {
      this.dialogVisible = true;
    },
    // 分配权限的弹窗
    async FenPprimary(id) {
      // 获取点击的id
      this.RooTid = id;
      // 获取全部树状图
      // const depts  = await getPermission();
      // console.log(depts);
      // 转化树状图
      this.RooTdata = tranListToTreeData(await getPermission(), "0");
      // console.log(this.RooTdata);
      // 获取角色的详细信息
      const { permIds } = await getRoleDetail(id);
      this.RootLinK = permIds;
      // console.log(this.RootLinK);
      // 获取树状图的数据
      this.porShow = true;
    },
    // 点击确定分配权限
   async primaryOk(){
await assignPremRole({permIds:this.$refs.primaryTree.getCheckedKeys(),id:this.RooTid})
//显示提示
this.$message.success('分配权限成功')
// 关闭弹窗
this.porShow=false
    },
    // 点击取消取消分配权限
    primaryNo(){
//清空数据
this.RootLinK=[]
// 关闭弹出层
this.porShow=false
    }
  },
};
</script>

<style>
.aniu {
  margin-top: 50px;
  margin-bottom: 10px;
}
</style>